<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function fn1(){
		var i1 = document.getElementById("i1"); 
		var i2 = document.getElementById("i2");
		var d1 = document.getElementById("d1");
	   d1.innerText = parseFloat(i1.value)+parseFloat(i2.value);
	}
	
	function fn2(){
		var i1 = document.getElementById("i1");
		var i2 = document.getElementById("i2");
		var d1 = document.getElementById("d1");
	   d1.innerText = parseFloat(i1.value)-parseFloat(i2.value);
	}
	function fn3(){
		var i1 = document.getElementById("i1");
		var i2 = document.getElementById("i2");
		var d1 = document.getElementById("d1");
	   d1.innerText = i1.value*i2.value;
	}
	function fn4(){
		var i1 = document.getElementById("i1");
		var i2 = document.getElementById("i2");
		var d1 = document.getElementById("d1");
	   d1.innerText = parseFloat(i1.value)/parseFloat(i2.value);
	}
	
	
	
	
	function fn5(x){
		var i1 = document.getElementById("i1");
		var i2 = document.getElementById("i2");
		var d1 = document.getElementById("d1");
		var n1 = parseFloat(i1.value);
		var n2 = parseFloat(i2.value);
		//通过switch判断运算符
	switch(x){
		case 1:
			d1.innerText = n1+n2;
			break;
		case 2:
			d1.innerText = n1-n2;
			break;
		case 3:
			d1.innerText = n1*n2;
			break;
		case 4:
			d1.innerText = n1/n2;
			break;
		}
	}
</script>
</head>
<body>
<h1 align="center"  style="color:pink">简易计算器</h1>
<input type="text" id="i1">
<input type="text" id="i2">



<!--   <input type="button" value="+" onclick="fn1()">
       <input type="button" value="-" onclick="fn2()">
       <input type="button" value="*" onclick="fn3()">
       <input type="button" value="/" onclick="fn4()">      -->



<input type="button" value="+" onclick="fn5(1)">
<input type="button" value="-" onclick="fn5(2)">
<input type="button" value="*" onclick="fn5(3)">
<input type="button" value="/" onclick="fn5(4)">
<hr>
<div id = "d1"></div>
</body>
</html>